<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0 auto;
				padding: 0;
			}
			
			.kuang1-1 {
				height: 30px;
				width: 1000px;
				border-top: 1px solid #A0A0A0;
				background-color: #E5E5E5;
				border-bottom: 1px solid #A0A0A0;
				border-right: 1px solid #A0A0A0;
				border-left: 2px solid #F10180;
			}
			
			.daohang li {
				font-size: 14px;
				line-height: 2em;

			}
			
			.lf {
				width: 150px;
				text-align: center;	
				float: right;
			}
			
			.lr {
				width: 300px;
				color: #F10180;
				margin-left: 10px;
				float: left;
			}
			#buytab{width: 1003px;border-left: 1px solid gray;border-right: 1px solid gray;border-bottom: 1px solid gray;}
			.haha img{width: 1000px;height: 250px;margin: 0 auto;}
			.haha{margin: 0 auto;width: 1000px;}
			.td1{background-color: #F10180;color: white;}
			.zhekou {height: 10px;width: 1000px;background-color: black;}
		</style>
	</head>

	<body>
		<div class="kuang1-1">
			<ul type="none" class="daohang">
				<li class="lr">唯品自营</li>
					<li class="lf">操作</li>
				<li class="lf">小计</li>
				<li class="lf">数量</li>
				<li class="lf">单价</li>
				
				
			
			</ul>

		</div>
		
		<div id="kuang2-1">
			<div class="zhekou"></div>
				<table id="buytab"  width="600" >
			<thead>
			
			</thead>
			<tbody id="tabbody">

			</tbody>
			<tfoot>
				<tr>
					<th><input type="button" value="添加" onclick="addfun()" /></th>
					
				</tr>
				<tr>
					<th></th>
					<th></th>
					<th></th>
					<th><p>合计：</p></th>
					<th class="td1">立即购买</th>
					
					
					
				</tr>
			</tfoot>
		</table>
		<script type="text/javascript">
		

			/**
			 * 添加产品
			 */
			function addfun() {
				var tbody = document.getElementById("buytab").children[1];
				//创建TR
				//创建6个TD
				var tr = document.createElement("tr");
		
				var td2 = document.createElement("td");

				td2.width="450px"
				td2.innerHTML="<img src='img/aafde868-5b7b-4e59-b457-e4fac77f38d6.jpg'width='100px'height='100px' />"
//				td2.innerHTML = "产品名称" + tbody.children.length;
				
				var td3 = document.createElement("td");
				td3.innerHTML = parseInt(Math.random() * 10000) + 1;
				td3.width="50px"
				var td4 = document.createElement("td");
				td4.innerHTML = "<input type='button'value='-'><input type='texe' value='1'size='1'/><input type='button'value='+'>";
				td4.getElementsByTagName("input")[0].onclick = function() {
					if(td4.getElementsByTagName("input")[1].value > 0) {
						td4.getElementsByTagName("input")[1].value--;
						td5.innerHTML = td3.innerHTML * td4.getElementsByTagName("input")[1].value;
					}
				}
				td4.getElementsByTagName("input")[2].onclick = function() {
					td4.getElementsByTagName("input")[1].value++;
					td5.innerHTML = td3.innerHTML * td4.getElementsByTagName("input")[1].value;
				}
td4.width="250px";
				var td5 = document.createElement("td");
				td5.innerHTML = td3.innerHTML;
				td5.width="100px";
				td4.style.textAlign="center";
				td3.style.textAlign="center";
				td2.style.textAlign="center";
				
				var td6 = document.createElement("td");
				td6.innerHTML = "<input type='button'value='删除'onclick='deltr(this)' />"
				td6.style.textAlign="center";
				
				tr.appendChild(td2);
				tr.appendChild(td3);
				tr.appendChild(td4);
				tr.appendChild(td5);
				tr.appendChild(td6);
				tbody.appendChild(tr)
				result += rum;
				document.getElementById("tab").children[0].appendChild(trp);
				document.getElementById("result").innerHTML = "总计：" + result + "元";
				dtime(result);

			}

			function deltr(t) {
				var tbody = document.getElementById("buytab").children[1];
				tbody.removeChild(t.parentNode.parentNode)
			}
			
		</script>
	</body>


</html>